<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Data | Dynamic Data</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }

      p {
        max-width: 600px;
      }

      h4 {
        margin-bottom: 3px;
      }
    </style>
  </head>
  <body>
    <p>
      You can change any settings you want while the network is initialized
      using the vis Dataset, setOptions and setData. Finally you can destroy the
      network and completely reinitialize it.
    </p>

    <h4>DataSet (change the data while it's loaded and initialzed):</h4>
    <input type="button" onclick="addNode()" value="add node dynamically" />
    <br />
    <input
      type="button"
      onclick="changeNode1()"
      value="change node 1's color dynamically"
    />
    <br />
    <input
      type="button"
      onclick="removeRandomNode()"
      value="remove a random Node"
    />
    <br />
    <input type="button" onclick="resetAllNodes()" value="reload all nodes" />
    <br />
    <input
      type="button"
      onclick="resetAllNodesStabilize()"
      value="reload all nodes and stabilize"
    />
    <br />

    <h4>setOptions (change the global options):</h4>
    <input
      type="button"
      onclick="changeOptions()"
      value="change the global options"
    /><br />

    <h4>setData (reinitialize the data):</h4>
    <input
      type="button"
      onclick="setTheData()"
      value="setData. This stabilizes again if stabilization is true."
    /><br />

    <h4>Cleanly destroy the network and restart it:</h4>
    <input
      type="button"
      onclick="resetAll()"
      value="Destroy the network and restart it."
    /><br />
    <div id="mynetwork"></div>

    <script type="text/javascript">
      var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;

      function startNetwork() {
        // this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
        nodeIds = [2, 3, 4, 5];
        shadowState = false;

        // create an array with nodes
        nodesArray = [
          { id: 1, label: "Node 1" },
          { id: 2, label: "Node 2" },
          { id: 3, label: "Node 3" },
          { id: 4, label: "Node 4" },
          { id: 5, label: "Node 5" },
        ];
        nodes = new vis.DataSet(nodesArray);

        // create an array with edges
        edgesArray = [
          { from: 1, to: 3 },
          { from: 1, to: 2 },
          { from: 2, to: 4 },
          { from: 2, to: 5 },
        ];
        edges = new vis.DataSet(edgesArray);

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {};
        network = new vis.Network(container, data, options);
      }

      function addNode() {
        var newId = (Math.random() * 1e7).toString(32);
        nodes.add({ id: newId, label: "I'm new!" });
        nodeIds.push(newId);
      }

      function changeNode1() {
        var newColor =
          "#" + Math.floor(Math.random() * 255 * 255 * 255).toString(16);
        nodes.update([{ id: 1, color: { background: newColor } }]);
      }

      function removeRandomNode() {
        var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
        nodes.remove({ id: randomNodeId });

        var index = nodeIds.indexOf(randomNodeId);
        nodeIds.splice(index, 1);
      }

      function changeOptions() {
        shadowState = !shadowState;
        network.setOptions({
          nodes: { shadow: shadowState },
          edges: { shadow: shadowState },
        });
      }

      function resetAllNodes() {
        nodes.clear();
        edges.clear();
        nodes.add(nodesArray);
        edges.add(edgesArray);
      }

      function resetAllNodesStabilize() {
        resetAllNodes();
        network.stabilize();
      }

      function setTheData() {
        nodes = new vis.DataSet(nodesArray);
        edges = new vis.DataSet(edgesArray);
        network.setData({ nodes: nodes, edges: edges });
      }

      function resetAll() {
        if (network !== null) {
          network.destroy();
          network = null;
        }
        startNetwork();
      }

      startNetwork();
    </script>
  </body>
</html>
